<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import { getDictByCode } from "@/api/dictApi";
import { selectProduct, delProductById } from "@/api/productApi";
import { ElMessage } from "element-plus";
import { update } from "@/api/customer";
const router = useRouter();
const tableData = ref();
//跳转到添加商品页面
function toAddProduct() {
  router.push({
    path: "/adminProduct/addProduct"
  });
}
onMounted(() => {
  selectProductData();
  dict();
});
const modelOptions = ref();

async function dict() {
  //型号
  let res3 = await getDictByCode(16);
  modelOptions.value = res3.data.subDict;
}
//查询产品
async function selectProductData() {
  let res = await selectProduct(queryData.value);
  if (res.code == 200) {
    ElMessage({
      message: res.msg,
      type: "success"
    });
    total.value = res.data.total;
    tableData.value = res.data.data;
  }
}
let total = ref();
const queryData = ref({
  productName: "",
  model: "",
  status: "",
  pageNum: 1,
  pageSize: 10
});
//重置参数
function reset() {
  queryData.value = {
    productName: "",
    model: "",
    status: "",
    pageNum: 1,
    pageSize: 10
  };
}
//查询
function select() {
  selectProductData();
}
//产品状态
const options = [
  {
    value: "",
    label: "所有"
  },
  {
    value: 1,
    label: "开启"
  },
  {
    value: 2,
    label: "禁用"
  }
];
//删除商品
async function del(row) {
  let res = await delProductById(row.id);
  if (res.code == 200) {
    ElMessage({
      message: res.msg,
      type: "success"
    });
    selectProductData();
  }
}
//编辑商品
function update(row) {
  router.push({
    path: "/adminProduct/addProduct",
    query: row
  });
}
//改变分页
function change() {
  selectProductData();
}
</script>

<template>
  <div>
    <el-card>
      <div>
        <div style="height: 50px; margin-top: 20px; margin-left: 5px">
          <span>产品名称:</span>
          <el-input
            v-model="queryData.productName"
            style="width: 240px; margin-right: 8px"
            placeholder="请输入"
          />
          <span>型号:</span>
          <el-select
            v-model="queryData.model"
            placeholder="全部"
            size="large"
            style="width: 240px; margin-right: 8px"
          >
            <el-option
              v-for="item in modelOptions"
              :key="item.id"
              :label="item.name"
              :value="item.name"
          /></el-select>
          <span>产品状态:</span>
          <el-select
            v-model="queryData.status"
            placeholder="全部"
            size="large"
            style="width: 240px; margin-right: 8px"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          /></el-select>
          <el-button type="primary" @click="select">查询</el-button>
          <el-button type="primary" @click="reset">重置</el-button>
        </div>
        <div style="height: 50px; margin-top: 20px; float: right">
          <el-button type="primary" @click="toAddProduct">添加</el-button>
          <el-button type="primary">导入</el-button>
        </div>
      </div>
    </el-card>
    <!-- 产品列表 -->
    <div>
      <el-table
        :data="tableData"
        border
        style="width: 100%; margin-top: 30px"
        max-height="430"
      >
        <el-table-column
          align="center"
          prop="productNumber"
          label="产品编号"
          width="110"
          header-align="center"
        />
        <el-table-column
          align="center"
          prop="productName"
          label="产品名称"
          width="100"
          header-align="center"
        />
        <el-table-column
          align="center"
          prop="categoryName"
          label="产品分类"
          header-align="center"
          width="150"
        />
        <el-table-column
          align="center"
          prop="model"
          label="型号"
          header-align="center"
          width="100"
        />
        <el-table-column
          align="center"
          prop="productDrawingNumber"
          label="产品图号"
          header-align="center"
          width="120"
        />
        <el-table-column
          align="center"
          prop="stock"
          label="库存"
          header-align="center"
          width="130"
        />
        />
        <el-table-column
          align="center"
          prop="createBy"
          label="创建人"
          header-align="center"
          width="130"
        />
        />
        <el-table-column
          align="center"
          prop="status"
          label="状态"
          header-align="center"
          width="130"
        >
          <template #default="{ row }">
            <el-switch
              v-model="row.status"
              :inactive-value="2"
              :active-value="1"
            />
          </template>
        </el-table-column>

        <el-table-column
          label="操作"
          header-align="center"
          align="center"
          fixed="right"
          width="300"
        >
          <template v-slot="{ row }">
            <el-button size="small" @click="update(row)"> 编辑 </el-button>
            <el-popconfirm title="确定删除吗" @confirm="del(row)">
              <template #reference>
                <el-button size="small"> 删除 </el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        v-model:page-size="queryData.pageSize"
        v-model:current-page="queryData.pageNum"
        size="small"
        background
        layout="total ,sizes,prev, pager,next, jumper, ->,"
        :total="total"
        :page-sizes="[10, 20, 30, 40]"
        style="float: right; margin-top: 20px"
        @change="change"
      />
    </div>
  </div>
</template>

<style lang="scss" scoped></style>
